<template>
  <div class="app-container root">
    <!-- 查询条件 -->
    <el-card style="height: 55px;overflow-y:hidden;overflow-x:hidden;text-align:left;" shadow="never" body-style="padding:10px">
    <el-form ref="form" inline :model="form" class="form-options" label-width="100px">
      <el-form-item label="仓库">
        <el-autocomplete
          ref="warehouseDisRef"
          v-model="form.warehouseDis"
          value-key="name"
          :fetch-suggestions="querySearchWarehouse"
          :trigger-on-focus="true"
          clearable
          @select="handleSelectWarehouse"
          @clear="clickClearwarehouseDis"/>
      </el-form-item>
      <div class="btns">
        <el-button type="info" @click="onReset('form')">重置</el-button>
        <el-button type="primary" @click="query">查询</el-button>
      </div>
    </el-form>
    </el-card>


    <!-- 树形菜单及内容展示 -->
    <el-row style="margin-top: 10px;height:100px;flex-grow: 1" :gutter="10">
      <el-col :span="4" style="height: 100%">
        <el-card style="height: 100%;overflow-y: auto;overflow-x: auto" shadow="never" body-style="padding:10px">
          <div>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>

            <el-tree
              class="filter-tree"
              style="margin-top: 5px"
              :data="data"
              :props="defaultProps"
              node-key="id"
              default-expand-all
              @node-click="nodeClick"
              accordion
              :filter-node-method="filterNode"
              ref="tree">
              <span slot-scope="{ node, data }">
                <span :style="formatStyle(data)">
                  <span>{{ data.name }}</span>
                  <span>({{ data.num }})</span>
                  <span v-if="node.isLeaf && data.isStop=='1'">(已停用)</span>
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>

      <!-- 统计内容展示 -->
      <el-col :span="20" style="height: 100%">
        <div v-if="chooseData" style="height: 100%">
          <el-card style="height: 100%" shadow="never">
            <div class="content-info" style="height: 100%">
              <div>{{ chooseData.name }} - 统计数据:</div>
              <br/>
              <div v-if="chooseData.level==0" style="margin-top: 10px">
                <span>模块数量（个）：</span>
                <span>{{ detailData.moduleNum }}</span>
              </div>
              <div v-if="chooseData.level==0||chooseData.level==1">
                <span>分类数量（类）：</span>
                <span>{{ detailData.classifyNum }}</span>
              </div>
              <div v-if="chooseData.level==0||chooseData.level==1||chooseData.level==2">
                <span>器材种数（种）：</span>
                <span>{{ detailData.typeNum }}</span>
              </div>
              <div v-if="chooseData.level==0||chooseData.level==1||chooseData.level==2||chooseData.level==3">
                <span>器材数量（件）：</span>
                <span>{{ detailData.equipmentNum }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import {
  getBaseEquipmentType,
  queryDetailById,
  getWarehouse,//仓库列表
  queryEquipmentDetailById
} from '@/api/warehouse'

export default {
  name: 'statistics',
  data() {
    return {
      chooseData: null,
      detailData: null,
      treeRightMenu: {},
      tmDisplay: false,
      rightSelectData: null,
      filterText: '',
      data: [],
      //查询条件
      warehouseOptions: [],//查询条件仓库

      form: {
        warehouseId: '',
        warehouseDis:'',
        inTimeStart: '',
        inTimeEnd: '',
      },

      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dataForm: {
        name: ''
      }
    }
  },
  mounted() {
    this.query()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    getWarehouse({}).then(res => {
      this.warehouseOptions = res.resultData
    })
  },
  methods: {
    onReset(searchForm) {
      this.form = {
          warehouseId: '',
          warehouseDis:'',
      }
    },
    formatStyle(data) {
      if (data.level < 2) {
        return 'color:#252525;font-size:16px;font-weight:500'
      } else if (data.level == 2) {
        return 'color:#252525;font-size:14px;font-weight:500'
      } else {
        return 'color:#666666;font-size:14px'
      }
    },
    query() {
      getBaseEquipmentType({isStatistic:1,warehouseId:this.form.warehouseId}).then(res => {
        this.data = res.resultData
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    nodeClick(data, node, detail) {
      this.chooseData = data

      this.detailData = {
        moduleNum: 0,
        classifyNum: 0,
        typeNum: 0,
        equipmentNum: 0
      }
      queryDetailById({ parentId: data.parentId, id: data.id ,isStatistic:1,warehouseId:this.form.warehouseId}).then(res => {
        this.detailData = {
          moduleNum: res.resultData.moduleNum,
          classifyNum: res.resultData.classifyNum,
          typeNum: res.resultData.typeNum,
          equipmentNum: res.resultData.equipmentNum
        }
      })
    },


    //过滤(方法共用)
    createFilter(queryString) {
        return (rr) => {//rr列表中的元素，这个列表都会被筛选
          return (rr.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
        };
    },
    /* 仓库 */
    querySearchWarehouse: function(queryString, cb) {
      const results = this.warehouseOptions
      var rs = queryString ? results.filter(this.createFilter(queryString)) : results;
      cb(rs)
    },
    handleSelectWarehouse(item){
      this.form.warehouseId=item.id
    },
    clickClearwarehouseDis(){
      this.$nextTick(() => {
        if (this.$refs.warehouseDisRef) {
          this.$refs.warehouseDisRef.activated = true;
        }
      });
    }
  }
}
</script>


<style lang="scss" scoped>
@import '@/styles/variables.scss';

.root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 104px);

  .tree-right-menu {
    position: fixed;
    display: block;
    z-index: 20000;
    //background-color: #fff;
    //padding: 5px 0;
    //border: 1px solid #ebeef5;
    //border-radius: 4px;
    //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }

  .content-info {
    div {
      line-height: 24px;
      font-size: 14px;
      color: $contentTextColor;
    }

    div:first-child {
      font-weight: 500;
      font-size: 16px;
      color: $titleTextColor;
    }
  }
}
</style>
